---
section: Sizing
title: Min-Width
slug: /docs/min-width/
order: 3
---

# Min-Width

Utilities for setting the minimum width of an element.

<carbon-ad />

| React props       | CSS Properties       |
| ----------------- | -------------------- |
| `minWidth={size}` | `min-width: {size};` |
| `minW={size}`     | `min-width: {size};` |

## Scaled Min-Width

All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scale `1`, you have to specify `1s`.

```jsx preview color=light-blue
<>
  <template preview>
    <x.div display="flex" flexDirection="column" spaceY={4} mx="auto" w={64}>
      {['1s', 8, 12, 16, 24].map((v) => (
        <x.div key={v} display="flex" alignItems="center" spaceX={4}>
          <x.p fontSize="sm" color="light-blue-600" w={24} textAlign="right">
            minWidth={v}
          </x.p>
          <x.div
            h={8}
            minWidth={v}
            borderRadius="md"
            bg="light-blue-500"
            color="white"
            fontSize="2xl"
            fontWeight="extrabold"
          />
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div>
    <x.div minWidth="1s" w={0} />
    <x.div minWidth={8} w={0} />
    <x.div minWidth={12} w={0} />
    <x.div minWidth={16} w={0} />
    <x.div minWidth={24} w={0} />
  </x.div>
</>
```

## Fixed Min-Width

Any valid value is accepted in width, numbers are converted to `px`, other units have to be specified.

```jsx preview color=emerald
<>
  <template preview>
    <x.div display="flex" flexDirection="column" spaceY={4} mx="auto" w={64}>
      {[123, '12px', '4rem', '3ex'].map((v) => (
        <x.div key={v} display="flex" alignItems="center" spaceX={4}>
          <x.p fontSize="sm" color="emerald-600" w={24} textAlign="right">
            minWidth={v}
          </x.p>
          <x.div
            h={8}
            minWidth={v}
            borderRadius="md"
            bg="emerald-500"
            color="white"
            fontSize="2xl"
            fontWeight="extrabold"
          />
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div>
    <x.div minWidth={123} w={0} />
    <x.div minWidth="12px" w={0} />
    <x.div minWidth="4rem" w={0} />
    <x.div minWidth="3ex" w={0} />
  </x.div>
</>
```

## Fluid Min-Width

Values from `0` to `1` are converted into percentages. As a fraction or a number, both are an expression. Of course specifying `[value]%` is also possible.

```jsx preview color=rose
<>
  <template preview>
    <x.div spaceY={6}>
      {[
        [['1/2', 0.5], 0.1],
        [['0.5', 0.5], 0.7],
      ].map((v, i) => (
        <x.div
          key={i}
          display="flex"
          overflow="hidden"
          borderRadius="md"
          color="white"
          fontFamily="mono"
          bg="cool-gray-300"
        >
          <x.div w={v[0][1]} px={2} py={4} bg="rose-400" textAlign="center">
            minWidth={v[0][0]}
          </x.div>
          {v[1] > v[0][1] && (
            <x.div
              w={v[1] - v[0][1]}
              px={2}
              py={4}
              bg="rose-500"
              textAlign="center"
            >
              {`0.2`}
            </x.div>
          )}
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div minWidth={1 / 2} w={0.1}>
    minWidth=1/2
  </x.div>
  <x.div minWidth={0.5} w={0.7}>
    minWidth=0.5
  </x.div>
</>
```

## Responsive

To control the margin of an element at a specific breakpoint, use responsive object notation. For example, adding the property `minWidth={{ md: 1 }}` to an element would apply the `minWidth={1}` utility at medium screen sizes and above.

```jsx
<x.div minWidth={{ xs: 1 / 2, md: 1 }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.

## Customizing

### Sizes scale

f you'd like to customize your values for width, height, min-width, min-height, max-width, max-height, all at once, use the `theme.sizes` section of your theme.

```diffjs
  // theme.js
  export const theme = {
    sizes: {
+     sm: '8px',
+     md: '16px',
+     lg: '24px',
+     xl: '48px',
    },
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme/).
